<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GuessNumber</title>
    <script src="jquery-3.7.1.js"></script>
</head>
<body>
    
    <button id="reset">重新开始一局游戏</button><br/>
    请输入要猜的数字: <input type="number" name="" id="inputNum"> <button id="guess">猜</button><br/>
    已经猜的次数: <span id="count">0</span><br/>
    结果:<span id="result"></span>
    
    <script>
        let randomNum = Math.floor(Math.random() * 100) + 1; //1-100之间的随机数
        console.log(randomNum);
        
        let count = 0;
        $("#guess").click(function(){
            count++;
            $("#count").text(count);
            let inputNum = $("#inputNum").val();
            if(inputNum < randomNum){
                $("#result").text("猜小了");
            }else if(inputNum > randomNum){
                $("#result").text("猜大了");
            }else{
                $("#result").text("恭喜你，猜对了！");
            }
        })

        $("#reset").click(function(){
            randomNum = Math.floor(Math.random() * 100) + 1; //1-100之间的随机数
            console.log(randomNum);
            count = 0;
            $("#count").text(count);
            $("#result").text("");
            $("#inputNum").val("");
        })
    </script>
</body>
</html>